<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:body>

        <ui:composition template="./Plantillas/Plantilla.xhtml">

            <ui:define name="top">
                <h1>GESTIÓN PROVEEDOR </h1>
            </ui:define>

            <ui:define name="left">
                
            </ui:define>

            <ui:define name="right">
                
            </ui:define>

            <ui:define name="content">
                
                 <!--  botón nuevo PROVEEDOR -->

                    <h:form>
                        <p:commandButton value="Nuevo Proveedor" image="icon-add"
                                         oncomplete="dlgNuevo.show()" actionListener="#{proveedorBean.prepararInsertar(actionEvent)}"/>
                        <p:commandButton action="/MateriaPrima.jsf" />
                    </h:form><br></br> 

                    <!--  tabla de PROVEEDORES -->

                    <h:form id="proveedor">  
                        <p:dataTable var="proveedor" value="#{proveedorBean.proveedores}" emptyMessage="No hay datos registrados " 
                                     paginator="true" rows="10" paginatorPosition="bottom"
                                     paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                     rowsPerPageTemplate="5,10,15">    
                            
                            <p:column headerText="Id">  
                                <h:outputText value="#{proveedor.idProveedor}" />  
                            </p:column>

                            <p:column headerText="Nombre">  
                                <h:outputText value="#{proveedor.nombre}" />  
                            </p:column>  

                            <p:column headerText="Teléfono">  
                                <h:outputText value="#{proveedor.telefono}" />  
                            </p:column> 
                            
                            <p:column headerText="Dirección">  
                                <h:outputText value="#{proveedor.direccion}" />  
                            </p:column>
                            
                            <p:column headerText="Email">  
                                <h:outputText value="#{proveedor.email}" />  
                            </p:column>

                            <p:column style="width:10%; text-align: center">  
                                <p:commandButton  update=":formEditar" oncomplete="dlgEditar.show();"
                                                  actionListener="#{proveedorBean.prepararActualizar(proveedor.idProveedor)}"
                                                  icon="icon-modificar" title="Editar"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
                                <p:commandButton  update=":formEliminar" oncomplete="dlgEliminar.show();"
                                                  actionListener="#{proveedorBean.prepararEliminar(proveedor.idProveedor)}"
                                                  icon="icon-eliminar" title="Eliminar"/> 
                            </p:column> 


                        </p:dataTable>  
                    </h:form>

                    <!--  form de agregar PROVEEDOR -->

                    <h:form id="formNuevo">
                        <p:dialog header="Nuevo Proveedor" widgetVar="dlgNuevo" resizable="false" id="dlgNuevo"  
                                  showEffect="fade" hideEffect="explode" modal="true">  

                            <p:growl id="growl" showDetail="true" life="3000" /> 

                            <h:panelGrid id="pgNuevo" columns="2" cellpadding="4" style="margin:0 auto;">  

                                <h:outputText value="Nombre:" />
                                <p:inputText value="#{proveedorBean.proveedor.nombre}" style="width: 200px "
                                             required="true" requiredMessage="Se necesita nombre"/>
                                
                                <h:outputText value="Teléfono:" />
                                <p:inputText value="#{proveedorBean.proveedor.telefono}" style="width: 200px "
                                             required="true" requiredMessage="Se necesita teléfono"/>
                                
                                <h:outputText value="Dirección:" />
                                <p:inputText value="#{proveedorBean.proveedor.direccion}" style="width: 200px "
                                             required="true" requiredMessage="Se necesita dirección"/>
                                
                                <h:outputText value="Email:" />
                                <p:inputText value="#{proveedorBean.proveedor.email}" style="width:200px"
                                             required="true" requiredMessage="Se necesita email" validatorMessage="Datos de email inválidos">
                                    <f:validateRegex
                                        pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
                                </p:inputText>

                            </h:panelGrid>
                            <p:separator/>
                            <p:commandButton value="Guardar" update=":proveedor,growl,pgNuevo" actionListener="#{proveedorBean.insertar(actionEvent)}" oncomplete="dlgNuevo.hide()" icon="icon-guardar"/>   
                            <p:commandButton value="Cancelar" update=":proveedor,pgNuevo" actionListener="#{proveedorBean.cancelar(actionEvent)}" oncomplete="dlgNuevo.hide()" icon="icon-cancelar" /> 
                        </p:dialog>  
                        <p:message for="pgNuevo"/>
                    </h:form>


                    <!--  form de editar PROVEEDOR -->

                    <h:form id="formEditar">
                        <p:dialog header="Editar Proveedor" widgetVar="dlgEditar" resizable="false" id="dlgEditar"  
                                  showEffect="fade" hideEffect="explode" modal="true">  

                            <p:growl id="growlEditar" showDetail="true" life="3000" /> 

                            <h:panelGrid id="pgEditar" columns="2" cellpadding="4" style="margin:0 auto;">  

                                <h:outputText value="Nombre:" />
                                <p:inputText value="#{proveedorBean.proveedor.nombre}" style="width: 200px "
                                             required="true" requiredMessage="Se necesita nombre"/>
                                
                                <h:outputText value="Teléfono:" />
                                <p:inputText value="#{proveedorBean.proveedor.telefono}" style="width: 200px "
                                             required="true" requiredMessage="Se necesita teléfono"/>
                                
                                <h:outputText value="Dirección:" />
                                <p:inputText value="#{proveedorBean.proveedor.direccion}" style="width: 200px "
                                             required="true" requiredMessage="Se necesita dirección"/>
                                
                                <h:outputText value="Email:" />
                                <p:inputText value="#{proveedorBean.proveedor.email}" style="width:200px"
                                             required="true" requiredMessage="Se necesita email" validatorMessage="Datos de email inválidos">
                                    <f:validateRegex
                                        pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
                                </p:inputText>  

                            </h:panelGrid>
                            <p:separator/>
                            <p:commandButton value="Actualizar" update=":proveedor,growlEditar,dlgEditar"
                                             actionListener="#{proveedorBean.actualizar()}"
                                             oncomplete="dlgEditar.hide()" icon="icon-modificar"/>   
                            <p:commandButton value="Cancelar" update=":proveedor,pgEditar"
                                             actionListener="#{proveedorBean.cancelar(actionEvent)}"
                                             oncomplete="dlgEditar.hide()" icon="icon-cancelar" /> 
                        </p:dialog>  
                        <p:message for="pgEditar"/>
                    </h:form>   

                    <!--  form de ELIMINAR PROVEEDOR -->

                    <h:form id="formEliminar">  

                        <p:growl id="growlEliminar" showDetail="true" life="3000" />   

                        <p:confirmDialog id="dlgEliminar" message="¿Está seguro de eliminar a este proveedor?"  
                                         header="Eliminar proveedor" severity="alert" widgetVar="dlgEliminar">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  

                            <p:commandButton value="Sí" update=":proveedor,growlEliminar,dlgEliminar"
                                             actionListener="#{proveedorBean.eliminar()}"
                                             oncomplete="dlgEliminar.hide()" icon="yes"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    
                            <p:commandButton value="No" update=":proveedor"                                     
                                             oncomplete="dlgEliminar.hide()" icon="icon-cancelar" />   

                        </p:confirmDialog>  

                    </h:form>   
                
                
            </ui:define>

            <ui:define name="bottom">
                bottom
            </ui:define>

        </ui:composition>

    </h:body>
</html>
